<template>
  <el-dialog :title="dialog.title" v-model="dialog.visible" width="80%" height="80%" draggable>
    <div>
      <el-card shadow="never">
        <listView :list="sum" />
        <el-table v-loading="loading" :data="advertiserEverydayCostList">
          <el-table-column label="时间" fixed prop="thatdayHoursDate" minWidth="160"></el-table-column>
          <el-table-column label="账户消耗" prop="cost">
            <template #default="{ row }">
              {{ formatPrice(row.cost) }}
            </template>
          </el-table-column>
          <el-table-column label="总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div>
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.thatdayDividendAmount) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.thatdayDividendAmount / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+0 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 0) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursCurrent) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursCurrent / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+1 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 1) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursOne) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursOne / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+2 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 2) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursTwo) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursTwo / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+3 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 3) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursThree) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursThree / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+4 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 4) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursFour) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursFour / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="T+n 总充值/回本率" minWidth="150">
            <template #default="{ row }">
              <div v-if="(row.thatdayHoursTimestamp + 60 * 60 * 5) * 1000 <= currTime">
                <span style="color: var(--el-color-primary)">
                  {{ formatPrice(row.dividendAmountHoursFive) }}
                </span>
                <span style="padding: 0 6px">/</span>
                <span class="text-[#ff0000]">
                  {{ row.cost * 1 !== 0 ? `${formatPrice((row.dividendAmountHoursFive / (row.cost / 1.015)) * 100)}%` : '0.00%' }}
                </span>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { getTotalHoursBlockPayAmount } from '@/api/oce/advertiserEverydayCost';
import { AdvertiserEverydayCostForm, AdvertiserEverydayCostQuery, AdvertiserEverydayCostVO } from '@/api/oce/advertiserEverydayCost/types';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import { formatPrice } from '@/utils';

const advertiserEverydayCostList = ref<AdvertiserEverydayCostVO[]>([]);
const loading = ref(true);
const total = ref(0);
const sum = ref([]);

const dialog = reactive<DialogOption>({
  visible: false,
  title: '趋势图'
});

const initFormData: AdvertiserEverydayCostForm = {
  advertiserCostId: undefined,
  referralLinkId: undefined,
  referralLinkType: undefined,
  referralLinkName: undefined,
  thirdAdvertiserAppCode: undefined,
  thirdAdvertiserId: undefined,
  thirdAdvertiserName: undefined,
  thatdayTimestamp: undefined,
  thatdayDate: undefined,
  thatdayTotalAmount: undefined,
  thatdayDividendAmount: undefined,
  thatdayProfitAmount: undefined,
  thatdayPaidTotalNum: undefined,
  thatdayPaidUseNum: undefined,
  thatdayRegisterTotalAmount: undefined,
  thatdayRegisterDividendAmount: undefined,
  iaaTotalAmount: undefined,
  iaaDividendAmount: undefined,
  iaaProfitAmount: undefined,
  iaaRegisterTotalAmount: undefined,
  iaaRegisterDividendAmount: undefined,
  dramaTitle: undefined,
  cost: undefined,
  show: undefined,
  avgShowCost: undefined,
  click: undefined,
  avgClickCost: undefined,
  ctr: undefined,
  convert: undefined,
  convertCost: undefined,
  convertRate: undefined,
  active: undefined,
  activeCost: undefined,
  activeRate: undefined,
  activePay: undefined,
  activePayCost: undefined,
  activePayRate: undefined,
  gamePayCount: undefined,
  gamePayCost: undefined,
  costHoursSpeed: undefined,
  createName: undefined,
  appType: undefined,
  deptId: undefined,
  extRecoveryRate: undefined,
  extAvgPrice: undefined,
  dramaId: undefined,
  startDate: undefined,
  endDate: undefined,
  extPayCost: undefined
};
const data = reactive<PageData<AdvertiserEverydayCostForm, AdvertiserEverydayCostQuery>>({
  form: { ...initFormData },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    iaaFlag: 0,
    referralLinkId: undefined,
    referralLinkType: undefined,
    referralLinkName: undefined,
    thirdAdvertiserAppCode: undefined,
    thirdAdvertiserId: undefined,
    thirdAdvertiserName: undefined,
    thatdayTimestamp: undefined,
    thatdayDate: undefined,
    thatdayTotalAmount: undefined,
    thatdayDividendAmount: undefined,
    thatdayProfitAmount: undefined,
    thatdayPaidTotalNum: undefined,
    thatdayPaidUseNum: undefined,
    thatdayRegisterTotalAmount: undefined,
    thatdayRegisterDividendAmount: undefined,
    iaaTotalAmount: undefined,
    iaaDividendAmount: undefined,
    iaaProfitAmount: undefined,
    iaaRegisterTotalAmount: undefined,
    iaaRegisterDividendAmount: undefined,
    dramaTitle: undefined,
    cost: undefined,
    show: undefined,
    avgShowCost: undefined,
    click: undefined,
    avgClickCost: undefined,
    ctr: undefined,
    convert: undefined,
    convertCost: undefined,
    convertRate: undefined,
    active: undefined,
    activeCost: undefined,
    activeRate: undefined,
    activePay: undefined,
    activePayCost: undefined,
    activePayRate: undefined,
    gamePayCount: undefined,
    gamePayCost: undefined,
    costHoursSpeed: undefined,
    createName: undefined,
    appType: undefined,
    deptId: undefined,
    extRecoveryRate: undefined,
    extAvgPrice: undefined,
    extPayCost: undefined,
    dramaId: undefined,
    params: {}
  },
  rules: undefined
});
const { queryParams, form } = toRefs(data);
const currTime = ref(Date.now());
/** 时段充值趋势图  -- 列表中数据 */
const getList = async () => {
  loading.value = true;
  const res = await getTotalHoursBlockPayAmount(queryParams.value);
  advertiserEverydayCostList.value = res.rows;
  sum.value = res.sum;
  loading.value = false;
};
const show = (data) => {
  console.log('去视图');
  dialog.visible = true;
  queryParams.value = data;
  getList();
};

defineExpose({ show });
</script>
